/**
 * Created by Administrator on 2017\9\7 0007.
 */
import React from 'react';
import template from './../../commonui/template';
import { Link } from 'react-router-dom';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
const FormItem=Form.Item;
class ReigisterCusomer extends React.Component{
    constructor(props){
        super(props);
        this.drawForm=this.drawForm.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
        this.getCaptcha=this.getCaptcha.bind(this);
        this.checkPassword=this.checkPassword.bind(this);
        this.handleConfirmBlur=this.handleConfirmBlur.bind(this);
        this.checkConfirm=this.checkConfirm.bind(this);
        this.checkCaptcha=this.checkCaptcha.bind(this);
        debugger;
        this.state={
            lb:this.props.location.lb||'Personal',
            confirmDirty:false
        }
    }
    handleSubmit(e){
        console.log(e);
        console.log(this.props.form);
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
              const data=this.props.form.getFieldsValue();
          }
        });
        /****ajax请求
         * handeleSubmit 同时处理企业用户和个人用户的注册
         * ****/
    }
    handleConfirmBlur(e){
        const value = e.target.value;
        console.log(value);
        console.log(!!value);
        this.setState({confirmDirty:this.state.confirmDirty||!!value})
    }
    checkPassword=(rule,value,callback)=>{
        const form = this.props.form;
        if(value&&value!==form.getFieldValue('password')){
            callback('Two passwords that you enter is inconsistent!');
        }else{
            callback();
        }
    }
    checkConfirm=(rule,value,callback)=>{
        const form = this.props.form;
        if(value&&this.state.confirmDirty){
            form.validateFields(['confirm'],{force:true});
        }
        callback();
    }
    getCaptcha(){
        this.setState({
            getCaptcha:'12345'
        })
    }
    checkCaptcha(rule,value,callback){
        console.log(value);
        if(value&&value!==this.state.getCaptcha){
            callback("the captcha is wrong !")
        }else{
            callback();
        }
    }
   drawForm(){
       const {getFieldDecorator} = this.props.form;
       if(this.state.lb=='Personal'){
            return (
                <div>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem label="TEL">{getFieldDecorator('phone',{
                                    rules:[{required:true,message:'Please input your phone'}]
                                })(<Input />)
                                }
                         </FormItem>
                         <FormItem label="Captcha">
                            <Row gutter={8}>
                                  <Col span={12}>
                                        {getFieldDecorator('captcha',{
                                             rules:[{required:true,message:'Please input the captcha u got'},{
                                                    validator:this.checkCaptcha
                                             }]
                                          })(
                                              <Input size="large"/>
                                           )
                                        }
                                  </Col>
                                  <Col>
                                        <Button size="large" onClick={this.getCaptcha}>Get captcha</Button>
                                  </Col>
                             </Row>
                        </FormItem>
                          <FormItem label="ID">{getFieldDecorator('ID',{
                                    rules:[{required:true,message:'Please input your ID'}]
                                })(<Input />)
                                }
                         </FormItem>
                         <FormItem label="Driving License">{getFieldDecorator('license',{
                                    rules:[{required:true,message:'Please input your driving license'}]
                                })(<Input />)
                         }
                         </FormItem>
                        <FormItem>
                                    <button type="primary" htmlType="submit">Register</button>
                         </FormItem>
                    </Form>
                </div>
            )
       } else{
            return (
                <div>
                    <Form onSubmit={this.handleSubmit}>
                        <div>
                            <img src=" " title="icon_computer"/>
                            <div>
                                <FormItem label="Username">{getFieldDecorator('Username',{
                                    rules:[{required:true,message:'Please input your Username '}]
                                })(<Input />)
                                }
                                </FormItem>
                                <FormItem label="Password">{getFieldDecorator('Password',{
                                    rules:[{required:true,message:'Please input your password '},{
                                        validator:this.checkConfirm,
                                    }]
                                })(<Input type="password" />)
                                }
                                </FormItem>
                                 <FormItem label="Re-enter">{getFieldDecorator('Re-enter',{
                                    rules:[{required:true,message:'Please input your Re-enter '},{
                                        validator:this.checkPassword,
                                    }]
                                })(<Input type="password" onBlur={this.handleConfirmBlur}/>)
                                }
                                </FormItem>
                            </div>
                        </div>
                        <div></div>
                        <div>
                            <img src="" title="icon_people"/>
                            <div>
                                <FormItem label="Company">{getFieldDecorator('company',{
                                    rules:[{required:true,message:'Please input your company'}]
                                })(<Input />)
                                }
                                </FormItem>
                                <FormItem label="Addr">{getFieldDecorator('address',{
                                    rules:[{required:true,message:'Please input your address'}]
                                })(<Input />)
                                }
                                </FormItem>
                                <FormItem label="Tel">{getFieldDecorator('phone',{
                                    rules:[{required:true,message:'Please input your telephone'}]
                                })(<Input />)
                                }
                                </FormItem>
                                <FormItem label="Landline-Number">{getFieldDecorator('Landline',{
                                    rules:[{required:true,message:'Please input your Landline'}]
                                })(<Input />)
                                }
                                </FormItem>
                                <FormItem label="E-mail">{getFieldDecorator('email',{
                                    rules:[{required:true,message:'Please input your email'}]
                                })(<Input />)
                                }
                                </FormItem>
                            </div>
                            <div>
                                <FormItem>
                                    <button type="primary" htmlType="submit">Register</button>
                                </FormItem>
                            </div>
                        </div>
                    </Form>
                </div>
            )
        }
    }
    render(){

         return (
             <div>
                 <div>{this.state.lb}</div>
                     {this.drawForm()}
            </div>

      )
    }
}

const UserRgster =Form.create()(ReigisterCusomer);
export default template({
    id: 'UserRgster',
    component: UserRgster
});
